/**
 * [路由配置](https://router.vuejs.org/zh/guide/)
 *
 * 第一步：在这里定义下面的路由配置
 * 第二步：在 main.js 中增加对应的修改
 */

// 第一步：引入
import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router';

// 第二步：创建路由对象
const routes = [
    {path: '/', redirect: '/home'},     // '/' 表示为空的时候匹配
    {path: '/home', component: () => import('./../components/Home.vue'), meta : {title: '首页', keepAlive: true}},       // 懒加载，也可以指定打包的组名称
    {
        path: '/mine',
        component: () => import('./../components/Mine.vue'),
        children : [
            // 二级路由中的 path 不用 / 开头
            {path: '', redirect: '/mine/msg'},
            {path: 'msg', component: () => import('./../components/MineMsg.vue') , meta : {title: '我的消息'}},
            {path: 'order', component: () => import('./../components/MineOrder.vue')},
        ],
        meta : {title: '我的'},
        beforeEnter: (to, from) => {
            console.log("mine 前置守卫", to);
        }
    },
    {path: '/news/:id', component: () => import('./../components/News.vue'), meta : {title: '新闻'} },   //  通过 :id 来接受传入的参数
    {path: '/circle', component: () => import('./../components/Circle.vue'), meta : {title: '圈子'} },

];

// 第三步：创建路由实例并传递 `routes` 配置
const router = createRouter({

    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
    // linkActiveClass: 'current'      // 这里可以指定路由激活之后的样式名称
});


// 全局路由的前置守卫
router.beforeEach( (to, from, next) => {
    console.log("form", from);
    console.log("to", to);

    // 如果参数上面，不接受 next， 会默认放行，如果接受 next，这里就需要加上 next() 才会执行路由跳转
    next();
});


// 全局路由的后置守卫
router.afterEach( (to, from) => {
    // 修改 title
    document.title = to.meta.title;
});


// 第四步：导出路由对象
export default router;
